<template>
  <div style="text-align: center;">
    <el-avatar shape="circle" style="width: 100px;height: 100px; display: inline-block;" fit= 'cover' :src="url + imgUrl" />
  </div>
  <div class="info"><span><el-icon style="vertical-align: middle"><Avatar/></el-icon>用户名称</span>
    {{ ruleForm.username  }}
  </div>
  <div class="info"><span><el-icon style="vertical-align: middle"><Iphone/></el-icon>手机号码</span>
    {{ ruleForm.phone }}
  </div>
  <div class="info"><span><el-icon style="vertical-align: middle"><Message/></el-icon>邮箱地址</span>
    {{ ruleForm.email  }}
  </div>
  <div class="info"><span><el-icon style="vertical-align: middle"><Histogram/></el-icon>所属部门</span>
    十方智育第六组
  </div>
  <div class="info"><span><el-icon style="vertical-align: middle"><UserFilled/></el-icon>角色</span>
    <span v-if="ruleForm.role==1">管理员</span>
    <span v-if="ruleForm.role==2">咨询师</span>
    <span v-if="ruleForm.role==3">客服</span>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";

const ruleForm = reactive({
  username: JSON.parse(sessionStorage.getItem('loginInfor')).username,
  phone: JSON.parse(sessionStorage.getItem('loginInfor')).phone,
  nickName: JSON.parse(sessionStorage.getItem('loginInfor')).nickName,
  phone: JSON.parse(sessionStorage.getItem('loginInfor')).phone,
  email: JSON.parse(sessionStorage.getItem('loginInfor')).email,
  role: JSON.parse(sessionStorage.getItem('loginInfor')).role,

});
const url = ref("http://localhost/file/downLoad?fileName=");
const imgUrl = ref(JSON.parse(sessionStorage.getItem('loginInfor')).img);

</script>

<style scoped>
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.mb-20 {
  margin-bottom: 20px;
}
</style>